<template>
	<view class="content">
		<form>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">客户</text>
				</view>
			</view>
			<view>
				<view  class="flex flex-wrap solid-top" v-for="(item,index) in applyInfo.Customers" :key="index">
					<view class="basis-xs padding flex align-center bg-white">
						<view @tap="deleteCustomer" :data-index="index" class="cuIcon-roundclose text-lg padding" ></view>
					</view>
					<view style="flex:1">
						<view class="cu-form-group">
							<view class="title">姓名:</view>
							<input placeholder="请输入客户姓名" v-model="item.name"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">手机号:</view>
							<input placeholder="请输入客户手机号" type="number" name="name" v-model="item.tel"></input>
						</view>
					</view>
				</view>
				<view class="padding bg-white solid-top">
					<text class="cuIcon-roundadd"></text>
					<text class="text-blue" @tap="addCustomer">添加</text>
				</view>
			</view>
			
			<!--报备楼盘-->
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">报备楼盘</text>
				</view>
			</view>
			<view>
				<view  class="flex flex-wrap solid-top" v-for="(item,index) in applyInfo.Houses" :key="index">
					<view class="basis-xs padding flex align-center bg-white">
						<view @tap="deleteHouse" :data-index="index" class="cuIcon-roundclose text-lg padding" ></view>
					</view>
					<view style="flex:1">
						<view class="cu-form-group">
							<view class="title">楼盘名称:</view>
							<input placeholder="请选择楼盘" v-model="item.name"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">报备联系人:</view>
							<input placeholder="请选择报备接收人"  name="name" v-model="item.SalerNames"></input>
							<text class="text-blue"   @tap="showModal" :data-index="index">更改</text>
						</view>
					</view>
				</view>
				<view class="padding bg-white solid-top">
					<text class="cuIcon-roundadd"></text>
					<text class="text-blue" @tap="addHouse">添加</text>
				</view>
			</view>
			
			
			
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">带访经纪人</text>
				</view>
			</view>
			<view>
				<view  class="flex flex-wrap solid-top" v-for="(item,index) in applyInfo.Brokers" :key="index">
					<view class="basis-xs padding flex align-center bg-white">
						<view @tap="deleteBroker" :data-index="index" class="cuIcon-roundclose text-lg padding" ></view>
					</view>
					<view style="flex:1">
						<view class="cu-form-group">
							<view class="title">姓名:</view>
							<input placeholder="请输入带访经纪人姓名" v-model="item.name"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">手机号:</view>
							<input placeholder="请输入带访经纪人手机号" type="number" name="name" v-model="item.tel"></input>
						</view>
					</view>
				</view>
				<view class="padding bg-white solid-top">
					<text class="cuIcon-roundadd"></text>
					<text class="text-blue" @tap="addBroker">添加</text>
				</view>
			</view>
			
			
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">到访时间</text>
				</view>
			</view>
			<view class="cu-form-group">
				<picker mode="date" v-model="date" :value="date" @change="dateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<picker mode="time" start="8:00" end="22:00"  v-model="time" :value="time"  @change="timeChange">
					<view class="uni-input">{{time}}</view>
				</picker>
			</view>
		</form>
		
		
		<uni-drawer :visible="showLeft" mode="left"   @close="closeDrawer">
			
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
				<view class="cu-item arrow" v-for="(item,index) in salers" :key="index">
					<button @tap="tabSelect" :data-saler="item" class="content">
						<text class="text-grey">{{item.name}}</text>
					</button>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="hideModal">关闭</button>
			</view>
		</uni-drawer>
		
		<view style="height:60px;"> </view>
		<view class="bottom"  @tap="sumbmit">立即提交</view>
	</view>
	
</template>

<script>
	
	import uniDrawer from '@/components/uni-drawer.vue';
	export default {
		components: {
			uniDrawer
		},
		data() {
			return {
				index:0,
				showLeft: false,
				salers:[],
				date:"请选择到访日期",
				time:"请选择到访时间",
				applyInfo: {
					Customers: [{name:'',tel:''}],
					Houses: [],
					Brokers: [{name:'',tel:''}],
					DateTime:'请选择时间',
					MemberId:null
				},
				
			};
		},
		onLoad(option){
			uni.removeStorage({
				key:"selectedHouse"
			});
			this.loadUserInfo();
			var now = new Date();
			this.date=now.getFullYear()+"-"+ (now.getMonth()+1)+"-"+now.getDate();
			//this.time=myDate.toLocaleTimeString();     //获取当前时间
		},
		onShow(){
			var me=this;
			uni.getStorage({
				key: 'selectedHouse',
				success: function(res) {
					console.log(res);

					uni.request({
						url: me.$rootUrl+'/Saler/GetList',
						data: {page:1,pageSize:100,status:2,houseid:res.data.Id},
						method: 'GET',
						success(res1) {
							if (res1.data.success) {
								var gwList = res1.data.items.map((item) => {
												return item.name;
											}).join(',');
								var telList = res1.data.items.map((item) => {
												return item.tel;
											}).join(',');
								 me.applyInfo.Houses.push({id:res.data.Id,name:res.data.Name,
								 selectedSalers:res1.data.items, SalerTels:telList,SalerNames:gwList,salerList:res1.data.items});
								
							} else {
								uni.showModal({
									content: '服务器错误!',
									showCancel: false
								});
							}
						},
						fail() {
							me.isLoading=false;
							uni.showModal({
								content: me.connectionFailText,
								showCancel: false
							});
						}
					});
					
				}
			});
		},
		methods: {
			
			dateChange(e) {
				this.date = e.target.value
			},
			
			timeChange(e) {
				this.time = e.target.value
			},
			closeDrawer(e) {
				this.showLeft = false
			},
			showModal(e) {
				this.index=e.currentTarget.dataset.index;
				this.salers=this.applyInfo.Houses[this.index].salerList;
				this.showLeft = true;
			},
			hideModal() {
				this.showLeft = false;
			},
			tabSelect(e) {
				var selectSaler=e.currentTarget.dataset.saler;
				this.applyInfo.Houses[this.index].SalerNames=selectSaler.name;
				this.applyInfo.Houses[this.index].SalerTels=selectSaler.tel;
				this.applyInfo.Houses[this.index].selectedSalers=selectSaler;
				this.showLeft=false;
			},
			
			
			letwayChange(e){
				this.applyInfo.letway=e.detail.value;
			},
			selectHouse(){
				uni.navigateTo({
					url:'/pages/ruzhu/select'
				})
			},
			
			addCustomer(){
				this.applyInfo.Customers.push({name:'',mobile:''});
			},
			deleteCustomer(e){
				var index=e.currentTarget.dataset.index;
				this.applyInfo.Customers.splice(index,1);
			},
			
			addHouse(){
				uni.navigateTo({
					url:'/pages/ruzhu/select'
				})
				
			},
			deleteHouse(e){
				var index=e.currentTarget.dataset.index;
				this.applyInfo.Houses.splice(index,1);
			},
			addBroker(){
				this.applyInfo.Brokers.push({name:'',tel:''});
			},
			deleteBroker(e){
				var index=e.currentTarget.dataset.index;
				this.applyInfo.Brokers.splice(index,1);
			},
			
			loadUserInfo(){
				uni.getStorage({
					key: 'UserInfo',
					success: (res)=>{
						if(!res.data){
							uni.showModal({
								content: '请先登陆!',
								showCancel: false
							});
							uni.navigateBack({
							}) ;
						}
						this.applyInfo.MemberId=res.data.id;
						//this.user = res.data;
					},
					fail:(e)=>{
						uni.showModal({
							content: '请先登陆!',
							showCancel: false,
							success:function(){
								uni.navigateBack({
								}) ;
							}
						});
					}
				});
			},
			sumbmit(){
				var me=this;
				
				if(me.applyInfo.Customers.length==0)
				{
					uni.showToast({
						icon:'none',
						title:"请添加客户！"
					})
					return;
				}
				if(me.applyInfo.Houses.length==0)
				{
					uni.showToast({
						icon:'none',
						title:"请添加楼盘信息！"
					})
					return;
				}
				if(me.applyInfo.Brokers.length==0)
				{
					uni.showToast({
						icon:'none',
						title:"请添加带访经纪人！"
					})
					return;
				}
					
				if(me.date=="请选择到访日期")
				{
					uni.showToast({
						icon:'none',
						title:"请选择到访日期！"
					})
					return;
				}
				if(me.time=='请选择到访时间')
				{
					uni.showToast({
						icon:'none',
						title:"请选择到访时间！"
					})
					return;
				}
				me.applyInfo.DateTime=me.date+" "+me.time;
				uni.request({
					url: me.$rootUrl + '/CustomerRecord/Create',
					data: me.applyInfo,
					method: 'POST',
					success(res) {
						if (res.data.success) {
							uni.showModal({
								content: '提交成功!',
								showCancel: false
							});
							uni.navigateBack({
							})
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.bottom {
			z-index:1000;
			position: fixed;
			bottom: 0;
			background-color: #D1372C;
			padding: 8px 0;
			width: 100%;
			font-size: 35upx;
			text-align: center;
			color: white;
		}
		.cu-form-group{
			.col-3{
				view{
					padding:2px 0;
				}
			}
		}
	}
</style>
